import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';

import Swiper from 'react-native-swiper';

const numPerPage = 3;

interface tradeInfo {
    type: string, // 交易类型， BTC/USDT
    nowPrice: Number | string, // 当前价格
    extent: Number | string, // 幅度
    cny: Number | string
}

interface Iprop {
    data: Array<tradeInfo>
}

class HomeTrade extends Component<Iprop, any> {

    constructor(props) {
        super(props);
    }

    renderData = () => {
        let {data} = this.props;
        let newData: Array<any> = [];
        let tmpData: Array<any> = [];
        for (let i = 0; i < data.length; i += numPerPage) {
            for (let j = i; j < i + numPerPage; j++) {
                tmpData.push(data[j]);
            }
            newData.push(tmpData);
            tmpData = [];
        }
        return (
            <Swiper dot={
                <View style={{
                    backgroundColor: 'rgba(0,0,0,.2)',
                    width: 20,
                    height: 1,
                    borderRadius: 4,
                    marginLeft: 3,
                    marginRight: 3,
                    marginTop: 3,
                    marginBottom: 3,
                }}/>
            } activeDot={
                <View style={{
                    backgroundColor: 'rgba(0,0,0,1)',
                    width: 20,
                    height: 1,
                    borderRadius: 4,
                    marginLeft: 3,
                    marginRight: 3,
                    marginTop: 3,
                    marginBottom: 3,
                }}/>
            }>
                {
                    newData.map((v, index) => {
                        return (
                            <View style={styles.slide} key={`newData-${index}`}>
                                {
                                    v.map((vv, vIndex) => {
                                        if (vv) {
                                            return (
                                                <View style={styles.tradeInfo} key={`vv-${vIndex}`}>
                                                    <Text style={styles.tradeInfoType}>{vv.type}</Text>
                                                    <Text style={styles.tradeInfoNowPrice}>{vv.nowPrice}</Text>
                                                    <Text style={styles.tradeInfoExtent}>{vv.extent}</Text>
                                                    <Text style={styles.tradeInfoCny}>{vv.cny}</Text>
                                                </View>
                                            )
                                        }
                                    })
                                }
                            </View>
                        )
                    })
                }
            </Swiper>
        )

    }

    render() {
        return (
            <View style={{height: 260}}>
                {
                    this.renderData()
                }
            </View>
        )
    }
}

export default HomeTrade;

const styles = StyleSheet.create({
    wrapper: {},
    slide: {
        flex: 1,
        flexDirection: 'row',
    },
    text: {
        // color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    },
    tradeInfo: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    tradeInfoType: {
        color: 'black'
    },
    tradeInfoNowPrice: {

    },
    tradeInfoExtent: {

    },
    tradeInfoCny: {

    }
});